<template>
  <el-dialog
          :model-value="dialogSeriesInfoVisible"
          :title="dialogSeriesInfoTitle"
          :before-close="handleCancelSeriesInfoDialog"
  >
    <el-descriptions :column="3" border v-loading="isloading">
      <el-descriptions-item
              label="节目集名称"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >{{dialogSeriesInfo.mediaName}}</el-descriptions-item>
      <el-descriptions-item
              label="节目集ID"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >{{seriesInfo.mediaid}}</el-descriptions-item>
      <el-descriptions-item
              label="审核状态"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >
        <span v-if="seriesInfo.state == 0">未提交审核</span>
        <span v-else-if="seriesInfo.state == 1">提交审核</span>
        <span v-else-if="seriesInfo.state == 2">审核通过</span>
        <span v-else-if="seriesInfo.state == 3">审核不通过</span>
        <span v-else-if="seriesInfo.state == 4">免审</span>
      </el-descriptions-item>
      <el-descriptions-item
              label="子集名称"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >{{seriesInfo.name}}</el-descriptions-item>
      <el-descriptions-item
              label="子集ID"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >{{seriesInfo.seriesid}}</el-descriptions-item>
      <el-descriptions-item
              label="子集节目类型"
              label-align="right"
              align="center"
              label-class-name="labelpref"
              v-if="seriesInfo.extends"
      >{{programTypeList[seriesInfo['extends']['programtype']]}}</el-descriptions-item>
      <el-descriptions-item
              label="子集别名"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >{{seriesInfo.alias}}</el-descriptions-item>
      <el-descriptions-item
              label="子集集号"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >{{seriesInfo.episodenum}}</el-descriptions-item>
      <el-descriptions-item
              label="时长"
              label-align="right"
              align="center"
      >{{seriesInfo.duration}}</el-descriptions-item>
      <el-descriptions-item
              label="创建时间"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >{{seriesInfo.ctime}}</el-descriptions-item>
      <el-descriptions-item
              label="修改时间"
              label-align="right"
              align="center"
              label-class-name="labelpref"
      >{{seriesInfo.mtime}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" border class="mb10">
      <el-descriptions-item
              label="摘要"
              label-align="right"
              align="left"
              label-class-name="labelpref"
      >{{seriesInfo.abstract}}</el-descriptions-item>
      <el-descriptions-item
              label="内容详情"
              label-align="right"
              align="left"
              label-class-name="labelpref"
      >{{seriesInfo.content}}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>
  import {toRefs, reactive, ref} from 'vue'
  import {getSeriesInfo} from "@/api/media/media";

  export default {
    name: "SeriesInfo",
    props: {
      dialogSeriesInfoVisible: {
        type: Boolean,
        default: false
      },
      dialogSeriesInfoTitle: {
        type: String,
        default: ''
      },
      dialogSeriesInfo: {
        type: Object,
        default() {
          return {
            seriesid: undefined,
            mediaName: ''
          }
        }
      }
    },
    emits: ['handleCancelSeriesInfoDialog'],
    setup(props, context) {
      const isloading = ref(false)
      const seriesData = reactive({
        seriesInfo: {}
      })
      const programTypeList = reactive({
        feature: '正片',
        trailer: '预告片',
        titbits: '花絮'
      })

      /** 关闭弹框 **/
      const handleCancelSeriesInfoDialog = () => {
        context.emit('handleCancelSeriesInfoDialog')
      }
      /** 获取子集详情 **/
      const handleGetSeriesInfo = () => {
        isloading.value = true
        getSeriesInfo({seriesid: props.dialogSeriesInfo.seriesid}).then(response => {
          isloading.value = false
          seriesData.seriesInfo = response.data
          console.log(response.data);
        })
      }

      return {
        handleCancelSeriesInfoDialog,
        ...toRefs(seriesData),
        isloading,
        handleGetSeriesInfo,
        programTypeList
      }
    }
  }
</script>

<style scoped>
  .labelpref{width:95px;}
</style>
